import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import './index.scss';
import TabBar from '../../components/tab-bar/index';
import NavigationBar from '../../components/navigationBar/index';
import { goodsList } from '../../services/goods';
import { fullImgUrl } from '../../utils/utils';
import iconCart from './img/icon_cart.png';

export default class MySwiper extends Component {
  state = {
    statusS: 2,
    pageObj: {
      page: 1,
      page_number: 10,
    },
    banner: [],
    nowIdx: 0,
    swiperH: '',
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    navigationtBarHeight: '',
    uerInfo: Taro.getStorageSync('userInfo')

  }
  componentDidMount() {
    goodsList({
      ...this.state.pageObj
    }).then(res => {

      res.list.forEach(element => {
        element.cover = fullImgUrl(element.cover);
      });
      // res.list.push(res.list[0])
      this.setState({
        banner: res.list
      })
    })
    const system = Taro.getSystemInfoSync();
    if (system.model === 'iPhone XS Max' || system.model === 'iPhone X' || system.model === 'iPhone XS' || system.model === 'iPhone XR' || system.model === 'iPhone 11' || system.model === 'iPhone 12') {
      this.setState({
        navigationtBarHeight: 'vip-goods-lists'
      })
    } else {
      this.setState({
        navigationtBarHeight: 'vip-goods-list'
      })
    }
  }
  goshopcard() {
    Taro.navigateTo({
      url: `/subPacKagebWork/pages/cart/index`
    })
  }
  //获取swiper高度
  getHeight = (e) => {
    var winWid = Taro.getSystemInfoSync().windowWidth - 2 * 50;//获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;//图片宽度
    console.log(imgh, imgw);
    var sH = winWid * imgh / imgw + "px"
    this.setState({
      // swiperH: sH//设置高度
    }, () => {
      console.log(this.state.swiperH)
    })
  }
  //swiper滑动事件
  swiperChange = (e) => {
    this.setState({
      nowIdx: e.detail.current
    })
  }
  toshop(list) {
    Taro.navigateTo({
      url: `/subPacKagebWork/pages/vip-goods-list/index?goods_id=${list.goods_id}`
    })
  }
  render() {
    const { banner, navigationtBarHeight, uerInfo } = this.state;
    return (
      <View className="vip-list" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text='商城' />
        <View className={navigationtBarHeight} >
          <View className="fixed-shop" onClick={this.goshopcard}>
            <Image className="fixed-shop-image" src={iconCart} />
          </View>
          {
            uerInfo.member_level === 0 ? banner.map(list => {
              if (list.is_member == 0) return <View className='demo-text-1'>
                <Image onClick={() => this.toshop(list)} className="swiper-img" src={list.cover}></Image>
              </View>
            }) :
              banner.map(list => {
                return <View className='demo-text-1'>
                  <Image onClick={() => this.toshop(list)} className="swiper-img" src={list.cover}></Image>
                </View>
              })
          }
        </View>
        <View className="tabBar" >

          <TabBar statusS={this.state.statusS}></TabBar>
        </View>

      </View>

    )
  }
}